<%@ include file="/WEB-INF/jsp/include.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<c:url var="form_add_component" value="/admin/components/formAdd" />
 
<a href="${form_add_component}" class="btn btn-primary"><i class="icon-plus icon-white"></i>
	Add component</a>

<table class="table table-hover table-condensed">
	<caption>List of Components</caption>
	<thead>
		<tr>
			<th>#</th>
		    <th>Component name</th>
		    <th>Type</th>
		    <th>Energy to turn on</th>
		    <th>Price</th>
		    <th>Actions</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="comp" items="${components}">
		    <tr>
		    
                <c:url var="delete_component" value="/admin/components/delete/${comp.idComponent}" />
                                            
                <td>${comp.idComponent}</td>
                <td>${comp.componentName}</td>
                <td>${comp.componentType}</td>
                <td>${comp.energyToTurnOn}</td>
                <td>${comp.price}</td>                    
			
				<td>
				    <span onmouseover="javascript:showDiv(${comp.idComponent}, event)"
				          onmouseout="javascript:hiddenDiv(${comp.idComponent})">
				        <i class="icon-eye-open" ></i>
				    </span>
				    <a href="${delete_component}"><i class="icon-trash"></i></a>
				</td>
				
			</tr>

            <c:if test="${comp.componentType == 'Firewall'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
	                    <ul>
	                        <li>Id component     : ${comp.idComponent}</li>	                       
	                        <li>Component type   : ${comp.componentType}</li>
	                        <li>Energy to turn on: ${comp.energyToTurnOn}</li>
	                        <li>Price            : ${comp.price}</li>
	                        <li>Access difficult : ${comp.dificultAccess}</li>
	                    </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'HardDisk'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
	                    <ul>
	                        <li>Id component     : ${comp.idComponent}</li>	                       
	                        <li>Component type   : ${comp.componentType}</li>
	                        <li>Energy to turn on: ${comp.energyToTurnOn}</li>
	                        <li>Price            : ${comp.price}</li>
	                        <li>Total capacity   : ${comp.totalCapacity}</li>
	                    </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'NetworkCard'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
	                    <ul>
	                        <li>Id component     : ${comp.idComponent}</li>	                      
	                        <li>Component type   : ${comp.componentType}</li>
	                        <li>Energy to turn on: ${comp.energyToTurnOn}</li>
	                        <li>Price            : ${comp.price}</li>
	                        <li>Speed connection : ${comp.speedConection}</li>
	                    </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'PowerSupply'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
	                    <ul>
	                        <li>Id component     : ${comp.idComponent}</li>	                        
	                        <li>Component type   : ${comp.componentType}</li>
	                        <li>Energy to turn on: ${comp.energyToTurnOn}</li>
	                        <li>Price            : ${comp.price}</li>
	                        <li>Generated energy : ${comp.generatedEnergy}</li>
	                    </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'Processor'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
	                    <ul>
	                        <li>Id component     : ${comp.idComponent}</li>	                       
	                        <li>Component type   : ${comp.componentType}</li>
	                        <li>Energy to turn on: ${comp.energyToTurnOn}</li>
	                        <li>Price            : ${comp.price}</li>
	                        <li>Speed for core   : ${comp.speedForCore}</li>
	                        <li>Cores            : ${comp.cores}</li>
	                    </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'RamMemory'}">                
                <div id="${comp.idComponent}" class="div_info_hidden">
                      
                    <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">             
                        <ul>
                            <li>Id component     : ${comp.idComponent}</li>                            
                            <li>Component type   : ${comp.componentType}</li>
                            <li>Energy to turn on: ${comp.energyToTurnOn}</li>
                            <li>Price            : ${comp.price}</li>
                            <li>Capacity         : ${comp.totalCapacity}</li>
                        </ul>
                    </div>
                </div>
            </c:if>
		</c:forEach>

	</tbody>
</table>

<c:url var="firstUrl" value="/admin/components/pages/1" />
<c:url var="lastUrl" value="/admin/components/pages/${totalPages}" />
<c:url var="prevUrl" value="/admin/components/pages/${currentIndex - 1}" />
<c:url var="nextUrl" value="/admin/components/pages/${currentIndex + 1}" />

<div class="pagination">
    <ul>
        <c:choose>
            <c:when test="${currentIndex == 1}">
                <li class="disabled"><a href="#">&lt;&lt;</a></li>
                <li class="disabled"><a href="#">&lt;</a></li>
            </c:when>
            <c:otherwise>
                <li><a href="${firstUrl}">&lt;&lt;</a></li>
                <li><a href="${prevUrl}">&lt;</a></li>
            </c:otherwise>
        </c:choose>
        <c:forEach var="i" begin="${beginIndex}" end="${endIndex}">
            <c:url var="pageUrl" value="/admin/components/pages/${i}" />
            <c:choose>
                <c:when test="${i == currentIndex}">
                    <li class="active"><a href="${pageUrl}"><c:out value="${i}" /></a></li>
                </c:when>
                <c:otherwise>
                    <li><a href="${pageUrl}"><c:out value="${i}" /></a></li>
                </c:otherwise>
            </c:choose>
        </c:forEach>
        <c:choose>
            <c:when test="${currentIndex == totalPages}">
                <li class="disabled"><a href="#">&gt;</a></li>
                <li class="disabled"><a href="#">&gt;&gt;</a></li>
            </c:when>
            <c:otherwise>
                <li><a href="${nextUrl}">&gt;</a></li>
                <li><a href="${lastUrl}">&gt;&gt;</a></li>
            </c:otherwise>
        </c:choose>
    </ul>
</div>
